<template>
	<div class="followPeople">
		<div class="list">
			<div class="list-item" v-for="(item,index) of listData" :key="index" @click="toPersonHomepage(item.user_id)">
				<image :src="item.basicUserInfo.photo_url||defaultJpg" mode="aspectFill" class="list-item-logo"></image>
				<div class="list-item-right">
					<div class="list-item-content">
						<div class="name">{{item.basicUserInfo.nickname}}</div>
						<div class="desc">{{item.basicUserInfo.signature}}</div>
					</div>
					<div class="list-item-btn">
						<div class="btn btn-active" @click.stop="followPeople('follow',index,item)" v-show="item.i_follow_it==0">关注</div>
						<div class="btn" @click.stop="followPeople('unfollow',index,item)" v-show="item.i_follow_it==1">已关注</div>
						<div class="btn" @click.stop="followPeople('unfollow',index,item)" v-show="item.i_follow_it==2">已互关</div>
					</div>
				</div>
				
			</div>
		</div>
		<div v-if="listData.length==0" class="no-data-tip">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noFans.png" mode="widthFix"></image>
			<div>你还没有粉丝</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	export default {
		name:'followPeople',
		data() {
			return {
				userId:'',//查看别人用户id
				listData:[],
				page:1,
				limit:10,
				defaultJpg:defaultJpg
			};
		},
		methods:{
			followPeople(type,index,item){
				//关注
				let title=type=='follow'?"关注该用户":'取消关注';
				let _this=this
				uni.showModal({
					title:title,
					success: function (res) {
						if (res.confirm) {
							type=='follow'?_this.followUser(index,item):_this.unFollowUser(index,item);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
			},
			async unFollowUser(index,item){
				//取关
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:item.user_id
				}
				let res=await this.$api.unFollowUser(params);
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				if(res.data.level=='success'){
					let item=this.listData[index];
					item.i_follow_it=0
					this.$set(this.listData,index,item)
				}
			},
			async followUser(index,item){
				//关注
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:item.user_id
				}
				let res=await this.$api.followUser(params)
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				if(res.data.level=='success'){
					let item=this.listData[index];
					let status=res.data.data.is_follow_me;
					item.i_follow_it=status==0?1:2;
					this.$set(this.listData,index,item)
				}
			},
			toPersonHomepage(id){
				uni.navigateTo({
					url:`/pages/person/customHomepage/customHomepage?userId=${id}`
				})
			},
			async getWasFollowUser(){
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:this.userId,
					limit:this.limit,
					page:this.page,
					// type:'new'
				}
				let res=await this.$api.getWasFollowUser(params);
				if(res.data.level=='success'){
					this.listData=[...this.listData,...res.data.data];
				}
				uni.stopPullDownRefresh()
			}
		},
		onShow() {
			// this.userId=getCurrentPages().options.userId;
			
		},
		onLoad(options) {
			this.userId=options.userId||'';
			this.getWasFollowUser();
		},
		onPullDownRefresh() {
			this.page=1;
			this.listData=[];
			this.getWasFollowUser()
		},
		onReachBottom() {
			this.page=++this.page;
			this.getWasFollowUser()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.followPeople{
		width:calc(100% -20rpx);
		margin-left:10rpx;
		//列表
		.list-item{
			@include flex(flex-start,flex-start);
			margin:40rpx 20rpx;
			.list-item-logo{
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
			.list-item-right{
				flex:1;
				@include flex(space-between);
				justify-content: center;
				border-bottom: 1px solid #E6E6E6;
				padding-bottom: 20px;
				margin-left:20px;
			}
			.list-item-content{
				flex:1;
				.name{
					font-size: 28rpx;
				}
				.desc{
					@include  ellipsis(2);
					margin-top:10rpx;
					color:gray;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}
			.list-item-btn{
				.btn{
					font-size: 22rpx;
					color:rgba(41,41,41,1);
					font-weight:600;
					color:rgba(187,188,191,1);
					background:rgba(247,247,247,1);
					border-radius: 10rpx;
					width:140rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}
				.btn-active{
					background: $bgColor;
					color:#000;
				}
			}
		}
		.no-data-tip{
			margin-top: 10vh;
			text-align: center;
			width: 100%;
			color:#6F7073;
		}
	}
</style>
